<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>懒加载</title>
</head>

<body>
    <style>
        body {
            overflow: scroll;
            height: 1000px;
            background-color: rgb(71, 4, 71);
        }

        h1 {
            margin-bottom: 0;
            text-align: center;
            color: #fff;
        }

        .query_box {
            margin: 0 auto;
            margin-top: 20px;
            width: 800px;

        }

        .query {
            width: 100%;
            padding: 12px;
            font-size: 16px;
        }


        .data {
            position: relative;
            background-color: rgb(138, 14, 138);
            box-shadow: 0 2px 4px rgba(136, 109, 109, 0.3);
            border-radius: 3px;
            padding: 20px;
            margin: 0 auto;
            margin-top: 40px;
            margin-bottom: 40px;
            width: 800px;

        }

        .data .data_id {
            position: absolute;
            top: -15px;
            left: -15px;
            font-size: 15px;
            width: 40px;
            height: 40px;
            background-color: #fff;
            border-radius: 50%;
            color: #296ca8;
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .data .data_title {
            margin: 15px;
            font-size: 26px;
            color: #fff;
            font-weight: bold;
        }

        .data .data_body {
            margin: 15px 0 0 15px;
            line-height: 1.3;
            color: #fff;
        }

        .loader {
            opacity: 0;
            display: flex;
            position: fixed;
            bottom: 8px;
            left: 50%;
            margin: 0 auto;
            transition: opacity 0.2s ease-in;
        }

        .circle {
            background-color: #fff;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin: 5px;
            animation: bounce 0.5s ease-in infinite;
        }

        .circle:nth-of-type(2) {
            animation-delay: 0.1s;
        }

        .circle:nth-of-type(3) {
            animation-delay: 0.2s;
        }

        @keyframes bounce {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        .gotop {
            position: fixed;
            right: 5%;
            bottom: 30px;
            display: none;
            font-size: 20px;
            cursor: pointer;
        }
    </style>
    <h1>我的博客</h1>
    <!-- 搜索框 -->
    <div class="query_box">
        <input type="text" class="query" placeholder="查询..." />
    </div>
    <div class="query_content"></div>
    <div class="loader">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>

    <div class="gotop">返回顶部</div>
    <script>
        let query = document.querySelector('.query')
        let loader = document.querySelector('.loader')
        let gotop = document.querySelector(".gotop");
        let querys = document.querySelector(".query_content");
        let page = 0;
        let url = "http://jsonplaceholder.typicode.com/posts";
        let method = "GET";
        let data = {
            limit: 10,
            page: 1,
        }

        //封装数据函数
        function ajaxToo(method, url, data, cb) {

            let xhr = new XMLHttpRequest();
            let a = '';
            for (var k in data) {
                a += `_${k}=${data[k]}&`

            }
            let newUrl = url + '?' + a.slice(0, -1)

            xhr.open(method, newUrl);
            xhr.send();
            xhr.addEventListener('readystatechange', function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    let data = JSON.parse(xhr.responseText)
                    cb(data)
                    // console.log(data);
                    loader.style.opacity = "0";
                }
            })
        }
        ajaxToo(method, url, data, cb)
        //数据渲染
        function cb(data) {
            // console.log(data);

            data.forEach(function (ele, index) {
                querys.innerHTML +=
                    `   
                    <div class="data">
             <div class="data_id">${ele.id}</div>
             <div class="data_title">${ele.title}</div>
             <div class="data_body">${ele.body}</div>
             </div>
             `

            })
        }
        //通过键盘输入松开事件  
        query.addEventListener('keyup', function () {
            let datas = document.querySelectorAll(".data");
            // console.log(datas)
            //遍历datas里的所有内容 内容和输入框的内容
            // 不存在 让内容全部消失
            // 存在的   显示
            datas.forEach(function (ele) {
                if (ele.innerText.indexOf(query.value) == -1) {
                    ele.style.display = "none";
                } else {
                    ele.style.display = "blcok";
                }
            })
        })
        //滚动触发事件 滚动后 数据更新
        document.addEventListener("scroll", function () {
            // 滚动条移动的距离
            let scrollTop = document.documentElement.scrollTop;
            // 所有元素的 总高度
            let clientHeight = document.documentElement.clientHeight;
            // 页面总高度
            let scrollHeight = document.documentElement.scrollHeight;

            // console.log(scrollTop);
            // console.log(scrollHeight); 
            // console.log(clientHeight); 
            //滚动条移动的距离 + 内容总高度 的和 除于 页面高度
            let newscroll = (scrollTop + clientHeight) / scrollHeight
            if (newscroll >= 1) {
                loader.style.opacity = "1";
                setTimeout("ajaxToo(method, url, data, cb)", 700);
                //每更新一次 加一次
                data.page++
            }
            // 返回顶部 大于200出现
            if (document.documentElement.scrollTop >= 200) {
                gotop.style.display = "block";
            } else {
                gotop.style.display = "none";
            }
        });
        //点击返回顶部 上升 
        gotop.addEventListener("click", function () {
            // console.log(document.documentElement.scrollTop);
            let timer = setInterval(function () {
                document.documentElement.scrollTop -= document.documentElement.scrollTop * 0.1;
                //去除定时器
                if (document.documentElement.scrollTop == 0) {
                    clearInterval(timer);
                }
            }, 20);
        });
    </script>
</body>

</html>